<script setup>
import { reactive, ref } from 'vue';
import { useBuildAllList, useActivityStatus } from '../../../hooks';
import { ElMessage } from 'element-plus';
import ImageUpload from   '../../../components/ImageUpload'
// ==================
const buildList = useBuildAllList()
const statusList = useActivityStatus()
//子父通信============
// const emit = defineEmits(['updateList'])
// ======= 表单数据 ========= 为了方便重置时取值 做展开操作
const defaultState = {
    community_code: '',
    title: '',
    place: '',
    sponsor_unit: '',
    begin_time: '',
    end_time: '',
    status: null,
    photo: '',
    content: ''
}
const formData = reactive({ ...defaultState })
// 校验规则
const formRules = {
    community_code: [{ required: true, message: '请选择', trigger: 'change' }],
    title: [{ required: true, message: '请输入', trigger: 'blur' }],
    place: [{ required: true, message: '请输入', trigger: 'blur' }],
    sponsor_unit: [{ required: true, message: '请输入', trigger: 'blur' }],
    begin_time: [{ required: true, message: '请输入', trigger: 'change' }],
    end_time: [{ required: true, message: '请输入', trigger: 'change' }],
}
// 表单ref引用
const formRef = ref()
// 弹框控制变量
const isShow = ref(true)
// 表单提交
const onSubmit = async () => {
    try {
        // 表单校验
        await formRef.value.validate()
        // 整理数据
        // 发送请求
        await addBuildingApi(toRaw(formData))
        // 消息提示
        ElMessage.success('操作成功')
        // 关闭抽屉
        isShow.value = false
        // 列表更新
        emit('updateList')
    } catch (error) {
        console.log(error);
    }
}
//关闭事件
// const closeHandler = () => {
//     formRef.value.resetFields()
//     Object.assign(formData, { ...defaultState })
// }
// 回显操作
// const replyData = async (id) => {
//     let res = await getBuildingInfoApi(id)
//     Object.assign(formData, res.data)
//     console.log(formData);
//     isShow.value = true
// }
// 标题优化
// const title = computed(() => {
//     return formData.id ? '修改' : '添加'
// })
// ===============VUE3 中组件是封闭的 需要抛出去
defineExpose({
    isShow
})
</script>

<template>
    <el-drawer size="35%" v-model="isShow" :title="新增活动" :direction="direction" :before-close="handleClose">
        <el-form :model="formData" ref="formRef" :rules="formRules" label-width="80px" label-position="top" :inline="true"
            size="normal">
            <el-form-item prop="community_code" label="所属小区">
                <el-select clearable v-model="formData.community_code" placeholder="请选择">
                    <el-option v-for="item in buildList" :key="item.id" :label="item.name" :value="item.code"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="title" label="活动主题">
                <el-input v-model="formData.title"></el-input>
            </el-form-item>
            <el-form-item prop="place" label="活动地点">
                <el-input v-model="formData.place"></el-input>
            </el-form-item>
            <el-form-item prop="sponsor_unit" label="举办单位">
                <el-input v-model="formData.sponsor_unit"></el-input>
            </el-form-item>
            <el-form-item prop="begin_time" label="活动开始时间">
                <el-date-picker v-model="formData.begin_time" type="datetime" placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="end_time" label="活动结束时间">
                <el-date-picker v-model="formData.end_time" type="datetime" placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="status" label="活动状态">
                <el-radio-group v-model="formData.status" class="ml-4">
                    <el-radio label="1" size="large">有效</el-radio>
                    <el-radio label="2" size="large">无效</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item prop="photo" label="图片">
                <ImageUpload :limit="1" v-model="formData.photo"></ImageUpload>
            </el-form-item>
            <el-form-item prop="content" label="活动内容">
                <el-input v-model="formData.content" type="textarea"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="isShow = false">取消</el-button>
                <el-button type="primary" @click="onSubmit">确定</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<style  scoped></style>